<template>
  <!-- 附件批量查看 -->
  <div>
    <p class="no_data" v-if="!fileList?.length">-</p>
    <el-popover v-else :placement="placement" :title="title" :width="width" :trigger="trigger">
      <template #reference>
        <el-button type="primary" link>View</el-button>
      </template>
      <ul class="root">
        <li v-for="(item, index) in fileList" :key="index">
          <!-- <i :class="getIcon(item)"></i> -->
          <img :src="getIcon(item)" />
          <span class="file_name_warp">{{ item.name }}</span>
          <img class="file_action_wrap" src="@/assets/image/Preview.png" @click="viewFile(item)" />
        </li>
      </ul>
    </el-popover>
  </div>
</template>

<script setup>
import _ from 'lodash';
import { ElMessage } from 'element-plus';
const attrs = useAttrs();
// const route = useRouter();

const imageFormat = ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'pct', 'raw', 'tga', 'tif', 'psd', 'webp'];

const emits = defineEmits(['itemEvent']);
import pdf from '@/assets/image/Pdf.png';
import excel from '@/assets/image/Excel.png';
import photo from '@/assets/image/Photo.png';
import file from '@/assets/image/File.png';

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
  placement: {
    type: String,
    default: 'bottom-end',
  },
  title: {
    type: String,
    default: 'Attachment',
  },
  width: {
    type: Number,
    default: 300,
  },
  trigger: {
    type: String,
    default: 'click',
  },
  row: {
    type: Object,
    default: () => ({}),
  },
  filterKey: {
    type: Object,
    default: {
      name: 'name',
      url: 'url',
    },
  },
});

const fileList = computed(() => {
  if (attrs.formatter && _.isFunction(attrs.formatter)) {
    return attrs.formatter(value, props.row);
  } else {
    if (!props.modelValue?.length) {
      return [];
    }
    let arr = [];
    if (typeof props.modelValue === 'string') {
      arr = JSON.parse(props.modelValue);
    } else {
      arr = props.modelValue;
    }
    arr = arr.map(item => {
      item.name = item[props.filterKey.name];
      item.url = item[props.filterKey.url];
      return item;
    });
    return arr;
  }
});

function getIcon(item) {
  let fileSuffix = item.name?.substring(item.name.lastIndexOf('.') + 1);
  fileSuffix = fileSuffix?.toLowerCase(); // 转小写匹配
  if (imageFormat.indexOf(fileSuffix) > -1) {
    return photo;
  } else if (fileSuffix === 'pdf') {
    return pdf;
  } else if (fileSuffix === 'xls' || fileSuffix === 'xlsx') {
    return excel;
  } else {
    return file;
  }
}

function viewFile(item) {
  let params = null;
  let uid = item.uid || item?.raw?.uid;
  if (item.url) {
    // 列表或者详情接口有返回url地址
    params = encodeURIComponent(
      JSON.stringify({
        url: item.url,
        name: item.name,
      })
    );
    let fileSuffix = item?.name?.substring(item.name.lastIndexOf('.') + 1);
    fileSuffix = fileSuffix?.toLowerCase(); // 转小写匹配
    if (imageFormat.indexOf(fileSuffix) > -1) fileSuffix = 'image';
    emits('itemEvent', {
      ...attrs,
      ...item,
      fileParams: params,
      params,
      component: 'viewFile',
      fileSuffix,
    });
  } else {
    uid ? '' : ElMessage.warning('No attachment address found');
  }
}
</script>
<style lang="scss" scoped>
.no_data {
  text-align: center;
  padding: 0;
  margin: 0;
}
.root {
  max-height: 300px;
  overflow-y: auto;
  li {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #f8fafb;
    padding: 3px 6px;
    box-sizing: border-box;
    margin-bottom: 10px;

    .file_name_warp {
      flex: 1;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //用省略号显示
      white-space: nowrap; //不换行
      margin-left: 6px;
    }
    .file_action_wrap {
      cursor: pointer;
      margin-left: 6px;
    }
  }
}
</style>
